@import "../../../app.less";

.invoiceApplication {
    .info {
        padding: 40rpx 32rpx 10rpx;
        position: relative;

        .bj {
            width: 100%;
        }

        .content {
            position: absolute;
            top: 40rpx;
            left: 32rpx;
            right: 32rpx;
            padding: 44rpx 40rpx 0;

            .num {
                color: @color-white;
                font-size: 36rpx;
                font-weight: 600;
            }

            .desc {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                margin-top: 20rpx;

                .name {
                    color: @color-white;
                    font-size: 30rpx;
                    font-weight: 600;
                }

                .figure {
                    color: @color-white;
                    font-size: 60rpx;
                    font-weight: bold;
                }
            }

            .intro {
                border-top-width: 1px;
                border-top-style: solid;
                border-color: rgba(255, 255, 255, .2);
                margin-top: 28rpx;
                padding: 28rpx 0;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                view {
                    color: @color-white;
                    font-size: 26rpx;

                    &.time {
                        font-weight: lighter;
                    }

                    &.status {
                        position: relative;

                        &::after {
                            content: '';
                            position: absolute;
                            left: -20rpx;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 10rpx;
                            height: 10rpx;
                            border-radius: 50%;
                            background: @color-white;
                        }
                    }
                }
            }
        }
    }

    .van-tabs {
        background-color: @color-white;

        .van-tabs__line {
            background-color: @color-primary;
        }

        .van-tab {
            color: #313541;
        }

        .van-tab--active {
            color: @color-primary;
        }

        // .van-tab__pane--active{
        //     border-top: 1px solid #939DAD;
        //     opacity: 0.2;
        // }
    }

    .progress {
        background: @color-white;
        padding: 32rpx;

        .li {
            padding-left: 46rpx;
            padding-bottom: 60rpx;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                top: 24rpx;
                left: 12rpx;
                width: 1px;
                height: 100%;
                border-left-width: 1px;
                border-color: @color-text-secondary;
            }

            &::before {
                content: '';
                position: absolute;
                top: 12rpx;
                left: 0;
                width: 24rpx;
                height: 24rpx;
                background: @color-border-light;
                border-radius: 50%;
                z-index: 10;
            }

            &.complete {
                &::after {
                    border-left-style: solid;
                }
            }

            &.unfinished {
                &::after {
                    border-left-style: dashed;
                    opacity: .4;
                }
            }

            .intro {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                .name {
                    font-size: 34rpx;
                    color: @color-text-primary;
                    font-weight: 600;

                    text {
                        font-size: 30rpx;
                        font-weight: normal;
                        color: @color-text-secondary;
                    }
                }

                .time {
                    color: @color-text-secondary;
                    font-size: 26rpx;
                }
            }

            .status {
                font-size: 26rpx;
                margin-top: 8rpx;
            }

            .explain {
                width: 292rpx;
                height: 80rpx;
                line-height: 80rpx;
                box-sizing: border-box;
                padding: 40rpx;
                background-color: @color-background-primary;
                font-size: 28rpx;
                border-radius: 10rpx;
            }

            &.pass {
                &::before {
                    background: @color-success;
                }

                .status {
                    color: @color-success;
                }
            }

            &.decline {
                &::before {
                    background: @color-danger;
                }

                .status {
                    color: @color-danger;
                }
            }
        }
    }

    .opinion {
        height: 172rpx;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        background-color: @color-white;

        text {
            color: #67728F;
            font-size: 30rpx;
            margin-right: 82rpx;
        }

        .van-button {
            width: 200rpx;
            height: 80rpx;
            margin-top: 24rpx;
            border-radius: 10rpx;
        }
    }

    .van-popup {

        height: 610rpx;
        padding: 30rpx 33rpx 0 32rpx;
    }

    .pop {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        height: 48rpx;
        margin-bottom: 40rpx;
    }
    .van-button{
        width: 200rpx;
        height: 80rpx;
    }
}